<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Eno Yao</title>
  </head>
  <body>
    <script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
    <script>
      const { WeElement, define, html, h, render } = omi;
      import axios from "axios";
      const style = "a{color:red}";
      const StyledComponents = styled.div`
        div {
          color: red;
        }
        div p {
          font-size: 14px;
        }
      `;

      class MyEno extends WeElement {
        constructor(...args) {
          super(...args);
          this.state = {
            name: "yao"
          };
        }

        render() {
          return h(
            StyledComponents,
            null,
            h(
              "div",
              null,
              this.state.name,
              h(
                "button",
                {
                  onClick: this.testClick.bind(this)
                },
                "okkookko"
              )
            )
          );
        }

        componentDidMount() {
          console.log("LifeCycle");
        }

        testClick() {
          this.setState({
            name: "jingnij"
          });
        }
      }

      MyEno.css = `div{color:red}div p{font-size:14px}`;
      export default MyEno;
      render(
        html`
          <My-eno />
        `,
        "body"
      );
    </script>
  </body>
</html>
